<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
		<title>多肽筛选工具</title>
		<link charset="utf-8" rel="stylesheet" href="__PUBLIC__/static/asset/bootstrap/3.3.6/css/bootstrap.min.css">
		
        <style>
        	.no-padding-right{
        		padding-right : 0!important;
        	}
        	.no-padding-left{
        		padding-left: 0!important;
        	}
            .jumbotron{
            	padding-top: 15px !important;
            	padding-bottom: 15px !important;
            }
        </style>
	</head>
	<body>
		<div class="container-fluid">
			<div class="row">
				<div class="jumbotron">
					<h4><a href="{:config('base')}/index.php"><i class="glyphicon glyphicon-home"></i></a> 多肽筛选工具</h4>
                    <input type="hidden" id="current-type" value="1">
                    <ul class="nav nav-tabs" role="tablist" id="menu-tab">
                        <li role="presentation" class="active">
                            <a href="#screening-1" role="tab" data-toggle="tab" data-id="1">反义肽库</a>
                        </li>
                        <li role="presentation">
                            <a href="#screening-2" role="tab" data-toggle="tab" data-id="2">多位点扫描随机多肽矩阵</a>
                        </li>
                        <li role="presentation">
                            <a href="#screening-3" role="tab" data-toggle="tab" data-id="3">首尾相搭多肽矩阵</a>
                        </li>
                        <li role="presentation">
                            <a href="#screening-4" role="tab" data-toggle="tab" data-id="4">截头多肽矩阵</a>
                        </li>
                        <li role="presentation">
                            <a href="#screening-5" role="tab" data-toggle="tab" data-id="5">Ala筛选矩阵</a>
                        </li>
                        <li role="presentation">
                            <a href="#screening-6" role="tab" data-toggle="tab" data-id="6">扰序多肽矩阵</a>
                        </li>
                        <li role="presentation">
                            <a href="#screening-7" role="tab" data-toggle="tab" data-id="7">单位点扫描矩阵</a>
                        </li>
                        <li role="presentation">
                            <a href="#screening-8" role="tab" data-toggle="tab" data-id="8">T细胞截头肽库矩阵</a>
                        </li>
                    </ul>
                    <!-- Tab panes -->
                    <div class="tab-content">
                        <div role="tabpanel" class="tab-pane fade in active" id="screening-1">
                            <form id="form-antisense" action="{:url('result_peptide_antisense')}" method="post" class="form-horizontal" onsubmit="return false;">
                                <div class="form-group">
                                    <label class="col-md-10 col-sm-10 col-xs-10 control-label">
                                        序列（可输入氨基酸单字母或多字母，单字母为大写字母）<a href="{:url('synthetise_difficult_about')}" target="_blank"><i class="glyphicon glyphicon-question-sign"></i></a>
                                    </label>
                                </div>
                                <div class="form-group">
                                    <div class="col-md-10 col-sm-10 col-xs-10 no-padding-left no-padding-right">
                                        <div class="input-group">
                                            <span class="input-group-addon">5'</span>
                                            <input type="text" name="dna" class="form-control" id="dna">
                                            <span class="input-group-addon">3'</span>
                                        </div>
                                        <input type="hidden" name="debug" value="{$debug}">
                                        <input type="hidden" name="type" value="1">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <div class="col-md-10 col-sm-10 col-xs-10 no-padding-left no-padding-right">
                                        <div class="input-group">
                                            <span class="input-group-addon">N端</span>
                                            <input type="text" name="amino" value="{$amino|default=''}" class="form-control" id="amino-1">
                                            <span class="input-group-addon">C端</span>
                                        </div>
                                        <input type="hidden" name="debug" value="{$debug}">
                                    </div>
                                    <div class="col-md-1  col-sm-2 col-xs-12">
                                        <button id="calculate-button" type="button" class="calculate-button btn btn-primary pull-right" data-form="form-antisense"> 计算 </button>
                                    </div>
                                </div>
                            </form>
                        </div>
                        <!-- /#screening-1 -->
                        <div role="tabpanel" class="tab-pane fade" id="screening-2">
                            <form id="form-data" action="{:url('result_peptide_antisense')}" method="post" class="form-horizontal" onsubmit="return false;">
                                <div class="form-group">
                                    <label class="col-md-10 col-sm-10 col-xs-10 control-label">
                                        序列（可输入氨基酸单字母或多字母，单字母为大写字母）<a href="{:url('synthetise_difficult_about')}" target="_blank"><i class="glyphicon glyphicon-question-sign"></i></a>
                                    </label>
                                </div>

                                <div class="form-group">
                                    <div class="col-md-8 col-sm-10 col-xs-10 no-padding-left no-padding-right">
                                        <div class="input-group">
                                            <span class="input-group-addon">N端</span>
                                            <input type="text" name="amino" value="{$amino|default=''}" class="form-control" id="amino-2">
                                            <span class="input-group-addon">C端</span>
                                        </div>
                                        <input type="hidden" name="debug" value="{$debug}">
                                        <input type="hidden" name="type" value="2">
                                    </div>
                                    <div class="col-md-2">
                                        <div class="input-group">
                                            <span class="input-group-addon">扫描点</span>
                                            <input type="text" name="m" value="{$amino|default=''}" class="form-control">
                                        </div>
                                    </div>
                                    <div class="col-md-1  col-sm-2 col-xs-12">
                                        <button type="button" class="calculate-button btn btn-primary pull-right"> 计算 </button>
                                    </div>
                                </div>
                            </form>
                        </div>
                        <!-- /.screening-2 -->
                        <div role="tabpanel" class="tab-pane fade" id="screening-3">
                            <form id="form-overlapping" action="{:url('result_peptide_antisense')}" method="post" class="form-horizontal" onsubmit="return false;">
                                <div class="form-group">
                                    <label class="col-md-10 col-sm-10 col-xs-10 control-label">
                                        序列（可输入氨基酸单字母或多字母，单字母为大写字母）<a href="{:url('synthetise_difficult_about')}" target="_blank"><i class="glyphicon glyphicon-question-sign"></i></a>
                                    </label>
                                </div>

                                <div class="form-group">
                                    <div class="col-md-6 col-sm-10 col-xs-10 no-padding-left no-padding-right">
                                        <div class="input-group">
                                            <span class="input-group-addon">N端</span>
                                            <input type="text" name="amino" value="{$amino|default=''}" class="form-control" id="amino-3">
                                            <span class="input-group-addon">C端</span>
                                        </div>
                                        <input type="hidden" name="debug" value="{$debug}">
                                        <input type="hidden" name="type" value="3">
                                    </div>
                                    <div class="col-md-2">
                                        <div class="input-group">
                                            <span class="input-group-addon">目标多肽长度</span>
                                            <input type="text" name="m" value="6" class="form-control">
                                        </div>
                                    </div>
                                    <div class="col-md-2">
                                        <div class="input-group">
                                            <span class="input-group-addon">步移</span>
                                            <input type="text" name="offset" value="6" class="form-control">
                                        </div>
                                    </div>
                                    <div class="col-md-1  col-sm-2 col-xs-12">
                                        <button type="button" class="calculate-button btn btn-primary pull-right" data-form="form-overlapping"> 计算 </button>
                                    </div>
                                </div>
                            </form>
                        </div>
                        <!-- /.screening-3 -->
                        <div role="tabpanel" class="tab-pane fade" id="screening-4">
                            <form id="form-truncation" action="{:url('result_peptide_antisense')}" method="post" class="form-horizontal" onsubmit="return false;">
                                <div class="form-group">
                                    <label class="col-md-10 col-sm-10 col-xs-10 control-label">
                                        序列（可输入氨基酸单字母或多字母，单字母为大写字母）<a href="{:url('synthetise_difficult_about')}" target="_blank"><i class="glyphicon glyphicon-question-sign"></i></a>
                                    </label>
                                </div>

                                <div class="form-group">
                                    <div class="col-md-6 col-sm-10 col-xs-10 no-padding-left no-padding-right">
                                        <div class="input-group">
                                            <span class="input-group-addon">N端</span>
                                            <input type="text" name="amino" value="{$amino|default=''}" class="form-control" id="amino-4">
                                            <span class="input-group-addon">C端</span>
                                        </div>
                                        <input type="hidden" name="debug" value="{$debug}">
                                        <input type="hidden" name="type" value="4">
                                    </div>
                                    <div class="col-md-2">
                                        <div class="input-group">
                                            <span class="input-group-addon">截头数目(N端)</span>
                                            <input type="text" name="nterm" value="0" class="form-control">
                                        </div>
                                    </div>
                                    <div class="col-md-2">
                                        <div class="input-group">
                                            <span class="input-group-addon">截头数目(C端)</span>
                                            <input type="text" name="cterm" value="0" class="form-control">
                                        </div>
                                    </div>
                                    <div class="col-md-1  col-sm-2 col-xs-12">
                                        <button type="button" class="calculate-button btn btn-primary pull-right" data-form="form-truncation"> 计算 </button>
                                    </div>
                                </div>
                            </form>
                        </div>
                        <!-- /.screening-4 -->
                        <div role="tabpanel" class="tab-pane fade" id="screening-5">
                            <form id="form-alanine" action="{:url('result_peptide_antisense')}" method="post" class="form-horizontal" onsubmit="return false;">
                                <div class="form-group">
                                    <label class="col-md-10 col-sm-10 col-xs-10 control-label">
                                        序列（可输入氨基酸单字母或多字母，单字母为大写字母）<a href="{:url('synthetise_difficult_about')}" target="_blank"><i class="glyphicon glyphicon-question-sign"></i></a>
                                    </label>
                                </div>

                                <div class="form-group">
                                    <div class="col-md-11 col-sm-10 col-xs-10 no-padding-left no-padding-right">
                                        <div class="input-group">
                                            <span class="input-group-addon">N端</span>
                                            <input type="text" name="amino" value="{$amino|default=''}" class="form-control" id="amino-5">
                                            <span class="input-group-addon">C端</span>
                                        </div>
                                        <input type="hidden" name="debug" value="{$debug}">
                                        <input type="hidden" name="type" value="5">
                                    </div>
                                    <div class="col-md-1  col-sm-2 col-xs-12">
                                        <button type="button" class="calculate-button btn btn-primary pull-right" data-form="form-alanine"> 计算 </button>
                                    </div>
                                </div>
                            </form>
                        </div>
                        <!-- /.screening-5 -->
                        <div role="tabpanel" class="tab-pane fade" id="screening-6">
                            <form id="form-scrambled" action="{:url('result_peptide_antisense')}" method="post" class="form-horizontal" onsubmit="return false;">
                                <div class="form-group">
                                    <label class="col-md-10 col-sm-10 col-xs-10 control-label">
                                        序列（可输入氨基酸单字母或多字母，单字母为大写字母）<a href="{:url('synthetise_difficult_about')}" target="_blank"><i class="glyphicon glyphicon-question-sign"></i></a>
                                    </label>
                                </div>

                                <div class="form-group">
                                    <div class="col-md-9 col-sm-10 col-xs-10 no-padding-left no-padding-right">
                                        <div class="input-group">
                                            <span class="input-group-addon">N端</span>
                                            <input type="text" name="amino" value="{$amino|default=''}" class="form-control" id="amino-6">
                                            <span class="input-group-addon">C端</span>
                                        </div>
                                        <input type="hidden" name="debug" value="{$debug}">
                                        <input type="hidden" name="type" value="6">
                                    </div>
                                    <div class="col-md-2">
                                        <div class="input-group">
                                            <span class="input-group-addon">扰序位置</span>
                                            <input type="text" name="m" value="6" class="form-control">
                                        </div>
                                    </div>
                                    <div class="col-md-1  col-sm-2 col-xs-12">
                                        <button type="button" class="calculate-button btn btn-primary pull-right" data-form="form-scrambled"> 计算 </button>
                                    </div>
                                </div>
                            </form>
                        </div>
                        <!-- /.screening-6 -->
                        <div role="tabpanel" class="tab-pane fade" id="screening-7">
                            <form id="form-positional" action="{:url('result_peptide_antisense')}" method="post" class="form-horizontal" onsubmit="return false;">
                                <div class="form-group">
                                    <label class="col-md-10 col-sm-10 col-xs-10 control-label">
                                        序列（可输入氨基酸单字母或多字母，单字母为大写字母）<a href="{:url('synthetise_difficult_about')}" target="_blank"><i class="glyphicon glyphicon-question-sign"></i></a>
                                    </label>
                                </div>

                                <div class="form-group">
                                    <div class="col-md-9 col-sm-10 col-xs-10 no-padding-left no-padding-right">
                                        <div class="input-group">
                                            <span class="input-group-addon">N端</span>
                                            <input type="text" name="amino" value="{$amino|default=''}" class="form-control" id="amino-7">
                                            <span class="input-group-addon">C端</span>
                                        </div>
                                        <input type="hidden" name="debug" value="{$debug}">
                                        <input type="hidden" name="type" value="7">
                                    </div>
                                    <div class="col-md-2">
                                        <div class="input-group">
                                            <span class="input-group-addon">扫描的位置</span>
                                            <input type="text" name="m" value="6" class="form-control">
                                        </div>
                                    </div>
                                    <div class="col-md-1  col-sm-2 col-xs-12">
                                        <button type="button" class="calculate-button from-control btn btn-primary pull-right" data-form="form-positional"> 计算 </button>
                                    </div>
                                </div>
                            </form>
                        </div>
                        <!-- /.screening-7 -->
                        <div role="tabpanel" class="tab-pane fade" id="screening-8">
                            <form id="form-tcell" action="{:url('result_peptide_antisense')}" method="post" class="form-horizontal" onsubmit="return false;">
                                <div class="form-group">
                                    <label class="col-md-10 col-sm-10 col-xs-10 control-label">
                                        序列（可输入氨基酸单字母或多字母，单字母为大写字母）<a href="{:url('synthetise_difficult_about')}" target="_blank"><i class="glyphicon glyphicon-question-sign"></i></a>
                                    </label>
                                </div>

                                <div class="form-group">
                                    <div class="col-md-8 col-sm-10 col-xs-10 no-padding-left no-padding-right">
                                        <div class="input-group">
                                            <span class="input-group-addon">N端</span>
                                            <input type="text" name="amino" value="{$amino|default=''}" class="form-control" id="amino-8">
                                            <span class="input-group-addon">C端</span>
                                        </div>
                                        <input type="hidden" name="debug" value="{$debug}">
                                        <input type="hidden" name="type" value="8">
                                    </div>
                                    <div class="col-md-3">
                                        <div class="input-group">
                                            <span class="input-group-addon">目标多肽长度(10-25)</span>
                                            <input type="text" name="m" value="6" class="form-control">
                                        </div>
                                    </div>
                                    <div class="col-md-1  col-sm-2 col-xs-12">
                                        <button type="button" class="calculate-button form-control btn btn-primary pull-right" data-form="form-tcell"> 计算 </button>
                                    </div>
                                </div>
                            </form>
                        </div>
                        <!-- /.screening-8 -->
                    </div>

				  <div id="message-show" class="alert alert-danger hidden" role="alert">警告内容</div>
				</div>
				<!--
                	/.col-md-12
                -->
			</div>
			<!-- /.row -->
			
			<div class="row">
				<div id="result-show" class="col-md-12 hidden">
					<div class="body" id="result-body"></div>
				</div>
			</div>
		</div>

		<script type="text/html" id="result_template">
			<div class="row">
				<h3>反义肽库（ 5'-3'）</h3>
				<div class="col-md-12">
					反义肽库多肽数量：{{d.antisense_count}}
				</div>
				<div class="col-md-12">
					预计费用：{{d.synthetise_fee}}
				</div>
				<div class="col-md-12">
                    序列详情：
					{{d.final_sequence}}
                    <div>
                        <button onclick="if(getElementById('detail-body-1').style.display==''){getElementById('detail-body-1').style.display='none'}else{getElementById('detail-body-1').style.display=''}">点击查看详情</button>
                       <div id="detail-body-1" style="display: none;">
                        {{# for(var i=0; i<d.antisense_count; i++){ }}
                        {{d.final_str_sequences[i]}}<br>
                        {{# } }}
                       </div>
                    </div>
				</div>
			</div>
            <div class="row">
                <h3>反义肽库（ 3'-5'）</h3>
                <div class="col-md-12">
                    反义肽库多肽数量：{{d.antisense_count2}}
                </div>
                <div class="col-md-12">
                    预计费用：{{d.synthetise_fee2}}
                </div>
                <div class="col-md-12">
                    序列详情：
                    {{d.final_sequence2}}
                    <div>
                        <button onclick="if(getElementById('detail-body-2').style.display==''){getElementById('detail-body-2').style.display='none'}else{getElementById('detail-body-2').style.display=''}">点击查看详情</button>
                        <div id="detail-body-2" style="display: none;">
                            {{# for(var i=0; i<d.antisense_count2; i++){ }}
                            {{d.final_str_sequences2[i]}}<br>
                            {{# } }}
                        </div>
                    </div>
                </div>
            </div>
		</script>
			
		<script src="__PUBLIC__/static/sea.js"></script>
		<script src="__PUBLIC__/static/skin/default/config.js"></script>
		
		<script>
			seajs.use('skin/default/peptide_screening', function(peptideScreening){
                peptideScreening.init();
                peptideScreening.initCalculate();
			})
		</script>
	</body>
</html>
